<script setup>
import { ShoppingCart } from '@element-plus/icons-vue'

import { ref } from 'vue'
import { useCartStore } from '@/stores/car'
import { useRouter } from 'vue-router'
const router = useRouter()
const storeCar = useCartStore()

const box = ref(false)
const buylist = () => {
  box.value = !box.value
}

const settlement = () => {
  router.push('/CartList')
  box.value = false
}
</script>
<template>
  <div class="buycar" @click="buylist">
    <a href="#">
      <el-icon size="28px" color="#27ba9b"><ShoppingCart /></el-icon>
    </a>
    <em class="num">{{ storeCar.allCount }}</em>
  </div>

  <!-- 商品列表卡片 -->
  <div class="list" :class="{ active: box }">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>您选择的商品有</span>
        </div>
      </template>
      <div v-for="(item, index) in storeCar.cartList" :key="index" class="text item">
        <!-- 图片部分 -->
        <img :src="item.picture" alt="" class="img" />

        <!-- 内容和标题部分 -->
        <div class="center" style="margin-left: 10px; width: 160px">
          <p class="title ellipsis-multiline" style="width: 100%">{{ item.name }}</p>
          <span class="content">{{ item.attrsText }}</span>
        </div>

        <!-- 价格和数量部分 -->
        <div class="right" style="margin-left: 10px">
          <span class="price" style="color: red; font-weight: bolder">${{ item.price }}</span>
          <span class="number" style="transform: translateY(5px)">*{{ item.count }}</span>
        </div>

        <!-- 删除按钮部分 -->
        <div class="del" style="margin-top: 30px" @click="storeCar.delCart(item.skuId)">×</div>
      </div>
      <template #footer>
        <div class="footer">
          <!-- 商品最后统计 -->
          <div class="zuihou">
            <span>共{{ storeCar.allCount }}件商品</span>
            <div class="allprice" style="color: red; font-weight: bolder">
              共&nbsp;&nbsp;${{ storeCar.allPrice.toFixed(2) }}&nbsp;&nbsp;元
            </div>
          </div>
          <!-- 商品结算按钮 -->
          <div class="btn">
            <el-button type="success" @click="settlement">去结算</el-button>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>
<style scoped>
.buy {
  position: relative;
}
.num {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0 7px;
  font-size: 12px;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  background-color: red;
  font-style: normal;
}
.list {
  display: none;
  position: absolute;
  top: 30px;
  left: -250px;
  width: 350px;
  z-index: 1;
}
.text {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.text:last-child {
  margin-bottom: 0;
}
.text img {
  width: 80px;
  height: 70px;
}
.center,
.right {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: space-around;
}
.center .content,
.right .number {
  font-size: 12px;
  color: #999;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.active {
  display: block;
}
.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略符号表示文本溢出 */
}

.ellipsis-multiline {
  overflow: hidden; /* 确保溢出的内容会被隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
  white-space: normal; /* 允许换行 */
  max-height: 4.5em; /* 最大高度为行高的4.5倍，即3行的高度 */
}
.del {
  display: none;
  position: absolute;
  right: 10px;

  /* border-radius: ; */
}
.text:hover .del {
  display: block;
  background-color: #999;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 7.5px;
  color: #fff;
  cursor: pointer;
}
</style>
